<template>
  <div>
      <title-panel/>

    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 26%"><span style="color:#FF3B30;">*</span>消毒日期</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{obj.dateOfDisinfection}}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 26%"><span style="color:#FF3B30;">*</span>消毒场所</div>
        <div class="line-text-out text-right" style="width: 68%">
          <span v-for="item in obj.disinfectionOfPlace" :key="item.id">{{item.name}}</span>
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>消毒药名称</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{obj.disinfectionName}}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>使用剂量</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{obj.usingTheDose}}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>单位</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{obj.units? obj.units.name: ''}}
        </div>
      </div>
    </van-cell>
    <van-cell style="border:none" :border="false">
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>消毒方法</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{obj.disinfectionMethod? obj.disinfectionMethod.name : ''}}
        </div>
      </div>
    </van-cell>

    <div class="m-b-10 shop">
      <div class="flex-between bottom content font-14 line-height-2">
        <div
          class="col-8686 text-center footerImg"
          @click="goEdit"
          style="width: 50%"
        >
          <img src="../../assets/img/bianji.png" alt="" />
          编辑
        </div>
        <div
          class="col-8686 text-center footerImg"
          @click="handelDel"
          style="width: 50%"
        >
          <img src="../../assets/img/shanchu.png" alt="" />
          删除
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Dialog,
  Toast,
  Icon,
  Cell
} from 'vant'
import { getValue, clearValue, setValue } from '@/utils/auth'
import { disinfectionDel, disinfectionRecordDetail } from '@/api/record'
import TitlePanel from '@/components/titlePanel'

export default {
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Dialog.name]: Dialog,
    TitlePanel
  },
  data() {
    return {
      obj: {}
    }
  },

  mounted() {
    this.loadInfo()
  },
  methods: {
    loadInfo() {
      const id = getValue('disinfectionRecordId')
      disinfectionRecordDetail(id).then(res => {
        if (res.status === 0) {
          this.obj = res.data
          const index = this.obj.createTime.indexOf(' ')
          this.obj.dateOfDisinfection = this.obj.dateOfDisinfection.substring(index, 0)
        }
      })
    },
    // 编辑
    goEdit() {
      this.$bridge.call('editDisinfectionRecord')
    },
    // 删除
    handelDel() {
      Dialog.confirm({
        message: '确认删除',
        confirmButtonColor: '#37B5B5'
      })
        .then(() => {
          Toast.loading()
          disinfectionDel(this.obj.id).then(res => {
            if (res.status === 0) {
              Toast.success('删除成功')
              clearValue('disinfectionRecordId')
              this.$bridge.call('base.closePage')
            }
          })
        })
        .catch(() => {

        })
    }
  }
}
</script>
<style lang="scss" scoped>
.van-cell {
  line-height: 40px;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 2em;
}
.m-r-10 {
  margin-right: 10px;
}
.line-text-out {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.col-1b1b {
  color: #1b1b1b;
}
.col-8686 {
  color: #868686;
}
::v-deep .van-cell {
  border:none
}
.imgstyle::after {
  content: "";
  width: 100px;
}
.footerImg {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #37b5b5;
  > img {
    width: 22px;
    height: 22px;
  }
}
.shop .bottom {
  position: fixed;
  bottom: 0;
  height: 68px;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  padding: 8px 10px 8px 14px;
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.addbtn{
    width: 50px;
    height: 24px;
    font-size: 13px;
    padding: 0;
    margin-top: 2px;
}
</style>
